<template>
  <div class="userWithdrawals">
    <!--选择银行卡-->
      <el-collapse accordion>
        <el-collapse-item title="请选择提现银行卡">
          <div class="project" v-for="(item, index) in bankCardList" :key="index">
            <div class="projectLeft">{{item.bankName}}<span>尾号{{item.bankCardNo?item.bankCardNo.substring(item.bankCardNo.length-4):''}}</span></div>
            <div class="projectContent"></div>
            <div class="projectRight green"><el-radio  :label="item.id" v-model="user.bankID">{{input}}</el-radio></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    <!--提现金额-->
    <el-row :span="24" class="quota">
      <el-col :span="24">
        <p class="quotaTitle">请输入提现金额</p>
        <div class="quotaContent">
          <div class="quotaCompany">￥</div><el-input v-model="user.transAmt" placeholder="请输入提现金额"></el-input>
        </div>
        <!-- <p  class="quotaPrompt">可提现1111.11元</p> -->
      </el-col>
    </el-row>
    <!--手机验证-->
    <div class="verification">
      <el-row :span="24">
        <el-col :span="4">手机号</el-col>
        <el-col :span="20"><span>{{phonenum}}</span></el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="4">验证码</el-col>
        <el-col :span="12"><el-input v-model="user.veriCode" placeholder="请输入验证码"></el-input></el-col>
         <el-col :span="8"> <el-button class="codeBtn" type="success" :disabled="codestatus" @click="getCode">{{codeText}}</el-button></el-col>
      </el-row>
    </div>
    <span style="display:block;width:96%;margin-left:2%;margin-top:5px;color:#a1a1a1;font-size:12px;">提现为100的倍数，提现到账时间T+1，周六周日和法定节假日顺延。</span>
    <!--提交-->
    <el-row :span="24" class="submit">
      <el-button type="success" @click.native="getSubmit()">确认提交</el-button>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  created () {
    let phonenum = this.$store.state.user.phone
    this.phonenum = phonenum.replace(phonenum.substr(3, 4), '****')
    this.user.phone = this.$store.state.user.phone
  },
  watch: {
    'user.bankID': {
      handler () {
        console.log(this.user.bankID)
      }
    }
  },
  data () {
    return {
      radio: '',
      activeName: '1',
      input: '',
      data: {},
      bankCardList: [],
      verifyObj: {},
      phonenum: '',
      user: {
        phone: '',
        bankID: ''
      },
      codeText: '获取验证码',
      codestatus: false
    }
  },
  methods: {
    getSubmit () {
      let reg = /^\d{1,}00$/
      if (!reg.test(this.user.transAmt) || this.user.transAmt < 100) {
        this.$message({
          message: '提现金额需要大于100且是100的倍数',
          type: 'error',
          duration: 2000,
          showClose: false
        })
        return false
      }
      // 跳转到提交界面
      console.log(this.user.transAmt)
      this.user.transAmt = (this.user.transAmt - 0).toFixed(2)
      this.user.token = this.$store.state.token
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/drawCash.shtml', this.user, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        emulateJSON: true }).then((data) => {
          if (data.body.success === '操作成功') {
            this.$message({
              message: '提现成功',
              type: 'success',
              duration: 1000,
              showClose: false
            })
            this.$router.push('/user')
          } else {
            this.$message({
              message: data.body.error,
              type: 'error',
              duration: 1000,
              showClose: false
            })
          }
        }, (ne) => {
          this.$message({
            message: '网络错误',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        }
      )
    },
    code () {
      // 获取验证码
      this.verifyObj.phone = this.user.phone
      this.$http.get('http://218.104.153.143:8089/numberone-auth/busiUser/getVeriCode.shtml', {
        params: this.verifyObj}, { // 头文件及JSON格式设定
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          emulateJSON: true
        }).then((data) => { // 数据获取成功
          this.$message({
            message: '验证码获取成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
        }, (ne) => { // 数据获取失败
          this.$message({
            message: '验证码获取失败',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        }
      )
    },
    getCode () {
      if (!this.user.phone) {
        this.$message({
          message: '请输入手机号码',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      }
      let sed = 60
      let timer = setInterval(() => {
        if (sed > 1) {
          sed--
          this.codeText = sed + 's'
          this.codestatus = true
        } else {
          clearInterval(timer)
          this.codeText = '获取验证码'
          sed = 60
          this.codestatus = false
        }
      }, 1000)
      this.code()
    }
  },
  beforeCreate () {
    //  获取银行卡信息
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/bankCardList.shtml', { token: this.$store.state.token }, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      emulateJSON: true }).then((data) => {
        this.bankCardList = data.body.bankCardList
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      }
    )
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.userWithdrawals {
  font-size: 14px;
  background-color: #f5f3f3;
  height: 615px;
  text-align: left;
  .codeBtn {
    width: 100%;
    height: 35px;
  }
  .el-collapse {
    .el-collapse-item__content {
      padding: 0;
      .project {
        border-bottom: 1px solid #e3e3e3;
        background-color: #f7f1f1;
        height: 40px;
        line-height: 40px;
        padding: 0 15px 0 38px;
        display: flex;
        .projectLeft {
          span {
            padding-left: 10px;
          }
        }
        .projectContent {
          flex: 1;
        }
        .projectRight {
          color: gray;
        }
        .green {
          color: green;
        }
      }
    }
  }
  .quota {
    margin: 10px 0;
    height: 80px;
    background-color: #fff;
    border-top: 1px solid #e3e3e3;
    // border-bottom: 1px solid #e3e3e3;
    padding: 0 15px;
    .quotaTitle {
      font-size: 14px;
      color: gray;
      padding: 5px;
    }
    .quotaContent {
      display: flex;
      border-bottom: 1px solid #e3e3e3;
      .quotaCompany {
        font-size: 20px;
        line-height: 30px;
      }
      .el-input__inner {
        border: none;
      }
    }
    .quotaPrompt {
      padding: 5px;
      font-size: 12px;
      color: gray;
    }
  }
  .verification {
    background-color: #fff;
    .el-row {
      padding: 0 15px;
      border-bottom: 1px solid #e3e3e3;
      height: 40px;
      line-height: 40px;
      .el-input__inner {
        border: none;
      }
    }
  }
  .submit {
    margin-top: 20px;
    padding: 0 15px;
    .el-button--success {
      width: 100%;
    }
  }
}
</style>
